import React, { CSSProperties } from 'react';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { Avatar, Button, Divider, message, Space, Tabs, theme } from 'antd';
import { AlipayOutlined, LockOutlined, LoginOutlined, TaobaoOutlined, UserOutlined, WeiboOutlined } from '@ant-design/icons';
import { userLogin } from '../../api';
import { setToken, setUserName } from '../../utils/auth';
const iconStyles: CSSProperties = {
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};


const App = () => {
  const { token } = theme.useToken();
  const onFinish = async (values) => {
    const res: any = await userLogin(values)
    message.success('登录成功')
    setToken(res.token)
    setUserName(values.account)
    location.href = location.port?'/':'/admin'
    console.log('values', values)
  }
  return (
    <LoginFormPage
 
      submitter={{
        submitButtonProps:{
          icon:<LoginOutlined />
        }
      }}
      onFinish={onFinish}
      backgroundImageUrl="https://static.xyb2b.com/images/2a9d2f43c23bb8e9fb068d9589994d7f.jpg"
      logo={<img height='100%' width="200px" src='//static.xyb2b.com/images/17247b83cf76bff7ae4bb8d57988f162.png' />}
      backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
      title="元汽泉扫码抽奖"
      containerStyle={{
        backgroundColor: 'rgb(255 255 255 / 65%)',
        backdropFilter: 'blur(4px)',
      }}
      subTitle="活动运营后台"
    // activityConfig={{
    //   style: {
    //     boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
    //     color: token.colorTextHeading,
    //     borderRadius: 8,
    //     backgroundColor: 'rgba(255,255,255,0.25)',
    //     backdropFilter: 'blur(4px)',
    //   },
    //   title: '活动标题，可配置图片',
    //   subTitle: '活动介绍说明文字',
    //   action: (
    //     <Button
    //       size="large"
    //       style={{
    //         borderRadius: 20,
    //         background: token.colorBgElevated,
    //         color: token.colorPrimary,
    //         width: 120,
    //       }}
    //     >
    //       去看看
    //     </Button>
    //   ),
    // }}
    // actions={
    //   <div
    //     style={{
    //       display: 'flex',
    //       justifyContent: 'center',
    //       alignItems: 'center',
    //       flexDirection: 'column',
    //     }}
    //   >
    //     <Divider plain>
    //       <span
    //         style={{
    //           color: token.colorTextPlaceholder,
    //           fontWeight: 'normal',
    //           fontSize: 14,
    //         }}
    //       >
    //         其他登录方式
    //       </span>
    //     </Divider>
    //     <Space align="center" size={24}>
    //       <div
    //         style={{
    //           display: 'flex',
    //           justifyContent: 'center',
    //           alignItems: 'center',
    //           flexDirection: 'column',
    //           height: 40,
    //           width: 40,
    //           border: '1px solid ' + token.colorPrimaryBorder,
    //           borderRadius: '50%',
    //         }}
    //       >
    //         <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
    //       </div>
    //       <div
    //         style={{
    //           display: 'flex',
    //           justifyContent: 'center',
    //           alignItems: 'center',
    //           flexDirection: 'column',
    //           height: 40,
    //           width: 40,
    //           border: '1px solid ' + token.colorPrimaryBorder,
    //           borderRadius: '50%',
    //         }}
    //       >
    //         <TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
    //       </div>
    //       <div
    //         style={{
    //           display: 'flex',
    //           justifyContent: 'center',
    //           alignItems: 'center',
    //           flexDirection: 'column',
    //           height: 40,
    //           width: 40,
    //           border: '1px solid ' + token.colorPrimaryBorder,
    //           borderRadius: '50%',
    //         }}
    //       >
    //         <WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
    //       </div>
    //     </Space>
    //   </div>
    // }
    >


      <ProFormText
        name="account"
        fieldProps={{
          size: 'large',
          prefix: (
            <UserOutlined
              style={{
                color: token.colorText,
              }}
              className={'prefixIcon'}
            />
          ),
        }}
        placeholder={'请输入用户名'}
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          },
        ]}
      />
      <ProFormText.Password
        name="password"
        fieldProps={{
          size: 'large',
          prefix: (
            <LockOutlined
              style={{
                color: token.colorText,
              }}
              className={'prefixIcon'}
            />
          ),
        }}
        placeholder={'请输入密码'}
        rules={[
          {
            required: true,
            message: '请输入密码！',
          },
        ]}
      />

      {/* <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div> */}
    </LoginFormPage>
  )
}
export default App